import React, { useState } from 'react'
import "./index.css"

export default function Item({todo, done}) {
  //将控制active状态的值保存在state中,并设置初始值为false
  //移入就显示背景颜色,移出让背景颜色消失
  const [isActive, setIsActive] = useState(false)

  //鼠标移入li事件函数
  const mouseEnterHandle = ()=>{
    setIsActive(true)
  }
  //鼠标移出li事件函数
  const mouseLeaveHandle = ()=>{
    setIsActive(false)
  }

  return (
    <li 
      onMouseEnter={mouseEnterHandle}
      onMouseLeave={mouseLeaveHandle}
      className= {isActive? "active" : ""}
    >
          <label>
            <input type="checkbox" Checked={done}/>
            <span>{todo}</span>
          </label>
          <button className="btn btn-danger" style={{display:"none"}}>删除</button>
    </li>
  )
}
